import React, { useEffect } from "react";
import * as echarts from "echarts";
import chongqing from "../../assetst/json/province/chongqing.json";
import "./sicuanMap.css";
import tp from "../../assetst/picture/t_1.png";
export default function SicuanMapS() {
  useEffect(() => {
    echartsInit();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // [{ name: "渝北区", value: [106.512851, 29.601451, "渝北区"] }]
  const scatterDataJson = (val) => {
    let data = [];
    val.features.map((item) => {
      let itemDate = {};
      itemDate.name = item.properties.name;
      itemDate.value = item.properties.cp;
      data.push(itemDate);
      return null;
    });
    return data;
  };
  const ColorRgb = () => {
    let r = parseInt(Math.random() * 255);
    let g = parseInt(Math.random() * 255);
    let b = parseInt(Math.random() * 255);
    let opacity = Math.random().toFixed(2);

    return `rgba(${r},${g},${b},${opacity})`;
  };

  const ColorRgb2 = () => {
    let r = parseInt(Math.random() * 255);
    let g = parseInt(Math.random() * 255);
    let b = parseInt(Math.random() * 255);
    let opacity = 1;

    return `rgba(${r},${g},${b},${opacity})`;
  };
  let center = [105.594061, 29.403627];
  const convertData = (val) => {
    const data = [];
    val.features.map((item) => {
      let itemData = {};
      if (item.properties.name !== "荣昌区") {
        // {
        //     fromName: "荣昌区",
        //     toName: "永川区",
        //     coords: [
        //       [105.594061, 29.403627],
        //       [105.894714, 29.348748],
        //     ],
        //   }
        itemData.fromName = "荣昌区";
        itemData.toName = item.properties.name;
        itemData.coords = [center, item.properties.cp];
        data.push(itemData);
      }
      return null;
    });
    return data;
  };

  const echartsInit = () => {
    const myChart = echarts.init(document.getElementById("map"));
    const scatterData = scatterDataJson(chongqing);
    echarts.registerMap("chongqing", chongqing);
    const lineData = convertData(chongqing);
    const lines1 = [];
    lineData.map((item) => {
      let b = {
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 2,
        effect: {
          show: true,
          period: 10, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          // symbol: "image://./images/airline.png",
          symbolSize: [10, 10], //图标大小
        },
        lineStyle: {
          normal: {
            color: ColorRgb(),
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: lineData,
      };
      b.data = [item];
      b.lineStyle.normal.color = ColorRgb();
      lines1.push(b);

      return null;
    });
    const scatterDataRGB = [];
    scatterData.map((item) => {
      let b = {
        tooltip: {
          show: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          //   backgroundColor: "blue",
          textStyle: {
            color: "#fff",
          },
          formatter: (val) => {
            return `<div>${val.name}</div>`;
          },
        },
        type: "scatter",
        colorBy: "data",
        // symbol: `image://${tp}`,
        symbol: "circle",
        symbolSize: 20,
        coordinateSystem: "geo",
        data: scatterData,
        itemStyle: {
          color: ColorRgb(),
        },
        //   label: {
        //     show: true,
        //     color: "#fff",
        //     fontSize: 100,
        //     formatter: (val) => {
        //       //   console.log(val);
        //       return `${val.name}`;
        //     },
        //   },

        //   emphasis: {
        //     disabled: false,
        //     label: {
        //       show: true,
        //       color: "#fff",
        //       fontSize: 100,
        //       formatter: (val) => {
        //         //   console.log(val);
        //         return `${val.name}`;
        //       },
        //     },
        //   },
      };
      b.data = [item];
      scatterDataRGB.push(b);
      return null;
    });
    let effectScatter = [];
    scatterData.map((item) => {
      let b = {
        type: "effectScatter",
        name: "气泡",
        coordinateSystem: "geo",
        // symbol: "diamond",
        symbol: `image://${tp}`,
        symbolSize: "10",
        data: scatterData,
        rippleEffect: {
          // color: ColorRgb(),
          color: ColorRgb2(),
          number: 12,
          period: 3,
          scale: 5,
          brushType: "stroke",
        },
        itemStyle: {
          color: ColorRgb2(),
          borderWidth: 1,
        },
      };
      b.data = [item];
      effectScatter.push(b);
      return null;
    });
    const option = {
      tooltip: {
        trigger: "item",
      },
      geo: {
        tooltip: {
          show: false,
        },
        type: "map",
        name: "ditu",
        map: "chongqing",
        roam: true,
        aspectScale: 0.77,
        zoom: 1,
        scaleLimit: {
          min: 0.5,
          max: 2,
        },
        label: {
          show: false,
          color: "#fff",
        },
        itemStyle: {
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          // shadowColor: 'rgba(255, 255, 255, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 1,
        },
        emphasis: {
          disabled: true,
          label: {
            color: "#fff",
            fontSize: 12,
          },
        },
      },
      series: [
        // {
        //   tooltip: {
        //     // disabled: true,
        //     // enterable: true,
        //     show: true,
        //     backgroundColor: "rgba(50,50,50,0.7)",
        //     formatter: (val) => {
        //       return `<div>${val.name}</div>`;
        //     },
        //   },
        //   type: "scatter",
        //   colorBy: "data",
        //   symbol: "circle",
        //   symbolSize: 20,
        //   coordinateSystem: "geo",
        //   data: scatterData,
        //   itemStyle: {
        //     color: ColorRgb(),
        //   },
        //   //   label: {
        //   //     show: true,
        //   //     color: "#fff",
        //   //     fontSize: 100,
        //   //     formatter: (val) => {
        //   //       //   console.log(val);
        //   //       return `${val.name}`;
        //   //     },
        //   //   },

        //   //   emphasis: {
        //   //     disabled: false,
        //   //     label: {
        //   //       show: true,
        //   //       color: "#fff",
        //   //       fontSize: 100,
        //   //       formatter: (val) => {
        //   //         //   console.log(val);
        //   //         return `${val.name}`;
        //   //       },
        //   //     },
        //   //   },
        // },
        // 设置点
        // {
        //   type: "effectScatter",
        //   name: "气泡",
        //   coordinateSystem: "geo",
        //   symbol: "diamond",
        //   symbolSize: "10",
        //   data: scatterData,
        //   rippleEffect: {
        //     // color: ColorRgb(),
        //     color: ColorRgb(),
        //     number: 12,
        //     period: 3,
        //     scale: 5,
        //     brushType: "stroke",
        //   },
        //   itemStyle: {
        //     color: "yellow",
        //     borderWidth: 1,
        //   },
        // },
        ...effectScatter,
        ...scatterDataRGB,
        // 设置飞线
        ...lines1,
      ],
    };

    myChart.setOption(option);
  };
  return (
    <div id="map" className="map">
      sicuanMapS
    </div>
  );
}
